<template>
  <div class="registration-management">
    <div class="header">
      <h2>报名管理</h2>
    </div>

    <!-- 筛选表单 -->
    <el-form :inline="true" :model="queryParams" class="filter-form">
      <el-form-item label="活动标题">
        <el-input v-model="queryParams.activityTitle" placeholder="请输入活动标题" clearable @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item label="报名状态">
        <el-select v-model="queryParams.status" placeholder="请选择报名状态" clearable>
          <el-option label="待审核" :value="0" />
          <el-option label="已通过" :value="1" />
          <el-option label="已拒绝" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="签到状态">
        <el-select v-model="queryParams.checkInStatus" placeholder="请选择签到状态" clearable>
          <el-option label="未签到" :value="0" />
          <el-option label="已签到" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>搜索
        </el-button>
        <el-button @click="resetQuery">
          <el-icon><Refresh /></el-icon>重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :data="registrationList" stripe border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="activityTitle" label="活动标题" min-width="200" show-overflow-tooltip />
      <el-table-column prop="userName" label="用户姓名" width="120" />
      <el-table-column prop="userPhone" label="联系电话" width="140" />
      <el-table-column prop="createTime" label="报名时间" width="180" />
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" width="180" />
      <el-table-column prop="checkInStatus" label="签到状态" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.checkInStatus === 0" type="info">未签到</el-tag>
          <el-tag v-else-if="scope.row.checkInStatus === 1" type="success">已签到</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="scope">
          <el-button v-if="scope.row.status === 0" type="primary" link @click="handleAudit(scope.row, 1)">通过</el-button>
          <el-button v-if="scope.row.status === 0" type="danger" link @click="handleAudit(scope.row, 2)">拒绝</el-button>
          <el-button v-if="scope.row.status === 1 && scope.row.checkInStatus === 0" type="success" link @click="handleCheckIn(scope.row)">签到</el-button>
          <el-button type="warning" link @click="showUserInfo(scope.row)">用户信息</el-button>
          <el-button type="primary" link @click="showActivityInfo(scope.row)">活动信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 用户信息对话框 -->
    <el-dialog v-model="userInfoDialogVisible" title="用户信息" width="500px">
      <div v-if="currentUser">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="用户ID">{{ currentUser.id }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ currentUser.name }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentUser.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ currentUser.email }}</el-descriptions-item>
          <el-descriptions-item label="注册时间">{{ currentUser.createTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 活动信息对话框 -->
    <el-dialog v-model="activityInfoDialogVisible" title="活动信息" width="600px">
      <div v-if="currentActivity">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="活动ID">{{ currentActivity.id }}</el-descriptions-item>
          <el-descriptions-item label="活动标题">{{ currentActivity.title }}</el-descriptions-item>
          <el-descriptions-item label="活动类型">{{ currentActivity.type }}</el-descriptions-item>
          <el-descriptions-item label="活动地点">{{ currentActivity.location }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ currentActivity.startTime }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ currentActivity.endTime }}</el-descriptions-item>
          <el-descriptions-item label="报名截止">{{ currentActivity.registrationDeadline }}</el-descriptions-item>
          <el-descriptions-item label="活动状态">
            <el-tag v-if="currentActivity.status === 0">待发布</el-tag>
            <el-tag v-else-if="currentActivity.status === 1" type="success">已发布</el-tag>
            <el-tag v-else-if="currentActivity.status === 2" type="danger">已取消</el-tag>
            <el-tag v-else-if="currentActivity.status === 3" type="info">已结束</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="活动描述">{{ currentActivity.description }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getRegistrationList, updateRegistrationStatus, updateCheckInStatus } from '@/api/registration'
import { getUserDetail } from '@/api/user'
import { getActivityDetail } from '@/api/activity'
import { ElMessage, ElMessageBox } from 'element-plus'

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  activityTitle: '',
  status: null,
  checkInStatus: null
})

const registrationList = ref([])
const total = ref(0)
const userInfoDialogVisible = ref(false)
const activityInfoDialogVisible = ref(false)
const currentUser = ref(null)
const currentActivity = ref(null)

// 获取报名列表数据
const getList = async () => {
  try {
    const res = await getRegistrationList(queryParams)
    registrationList.value = res.data.list
    total.value = res.data.total
  } catch (error) {
    console.error('获取报名列表失败', error)
    ElMessage.error('获取报名列表失败')
  }
}

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  queryParams.activityTitle = ''
  queryParams.status = null
  queryParams.checkInStatus = null
  handleSearch()
}

// 分页大小变化
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  getList()
}

// 页码变化
const handleCurrentChange = (page) => {
  queryParams.pageNum = page
  getList()
}

// 审核
const handleAudit = (row, status) => {
  const statusText = status === 1 ? '通过' : '拒绝'
  ElMessageBox.confirm(`确认${statusText}该报名申请?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await updateRegistrationStatus(row.id, status)
      ElMessage.success(`报名${statusText}成功`)
      getList()
    } catch (error) {
      console.error(`报名${statusText}失败`, error)
      ElMessage.error(`报名${statusText}失败`)
    }
  }).catch(() => {})
}

// 签到
const handleCheckIn = (row) => {
  ElMessageBox.confirm('确认将该用户设为已签到状态?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await updateCheckInStatus(row.id, 1)
      ElMessage.success('签到成功')
      getList()
    } catch (error) {
      console.error('签到失败', error)
      ElMessage.error('签到失败')
    }
  }).catch(() => {})
}

// 查看用户信息
const showUserInfo = async (row) => {
  try {
    const res = await getUserDetail(row.userId)
    currentUser.value = res.data
    userInfoDialogVisible.value = true
  } catch (error) {
    console.error('获取用户信息失败', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 查看活动信息
const showActivityInfo = async (row) => {
  try {
    const res = await getActivityDetail(row.activityId)
    currentActivity.value = res.data
    activityInfoDialogVisible.value = true
  } catch (error) {
    console.error('获取活动信息失败', error)
    ElMessage.error('获取活动信息失败')
  }
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.registration-management {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 20px;
  padding: 18px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 